<template>
    <TyDragTab
      :tab-opt="tabOpt"
      :show-add="showAdd"
      :sortable="sortable"
      v-loading="tabLoading"
      @add="handleAdd"
      @dragStart="handleDragStart"
      @dragEnd="handleDragEnd"
      @tabChange="handleTabchange"
      :beforeLeave="handleTabLeave"
      :emptyText="$t('basic.label.emptyTab')"
      ref="dragTabRef"
    >
      <template v-for="(item, itemIndex) in tabOpt.list" :key="item.value" #[`${item.value}_header`]>
        <div style="display: flex">
          <em :class="item.iconClass" v-if="item.iconClass" class="tab-icon font-14"></em>
          {{ $t(`${item.label}`) || item.label }}
          <template v-if="item.type === 'custom'">
            <ty-plm-dropdown
              v-bind="item.dropdownOptions"
              :ref="el => (dropdownRef[item.value] = el)"
              @visible-change="visible => handleDropdownVisible(visible, item.value)"
              @command="value => handleSelect(value, item)"
            >
              <template #dropdownItem="{ data }">
                <ty-plm-popover
                  v-bind="
                    {
                      ...data.popoverOptions,
                      confirmCallback: close => handlePopoverConfirm(close, item, itemIndex, data),
                      cancelCallback: close => handlePopoverConfirm(close, item)
                    } || { disabled: true }
                  "
                  v-if="data.popoverInnerComponent && showPopover"
                >
                  <component
                    :is="data.popoverInnerComponent"
                    v-bind="getBindOption(data)"
                    ref="popoverInnerComponentRef"
                  ></component>
                  <template #reference>
                    <span style="width: 100%; padding: 0 8px">
                      <em :class="data.iconClass"></em>
                      {{ data.label }}
                    </span>
                  </template>
                </ty-plm-popover>
                <template v-else>
                  <span style="width: 100%; padding: 0 8px">
                    <em :class="data.iconClass"></em>
                    {{ data.label }}
                  </span>
                </template>
              </template>
            </ty-plm-dropdown>
          </template>
        </div>
      </template>
      <template v-for="item in tabOpt.list" #[item.value] :key="item.value">
        <anchor-content
          :ref="el => (anchorContentRef[item.value + 'anchor_content_ref'] = el)"
          :treeObj="treeObj"
          :tabInfo="item"
          v-loading="tabContentLoading"
          @updateTabInfo="handleUpdateTabInfo"
        >
          <!-- modify by lifs 2024/09/04 通用附件的读写与工艺对象的权限和检出状态联动控制 -->
          <component
            v-if="item.componentList && item.componentList.length"
            :is="getContainerComponent(item)"
            :ref="el => setComponentRef(el, item.value)"
            :tabInfo="item.componentList"
            :isDisabled="isDisabled"
            :treeObj="treeObj"
            :treeRef="treeRef"
            :dataDetail="dataDetail"
            :extendObj="extendObj"
            v-bind="$attrs"
          ></component>
        </anchor-content>
      </template>
    </TyDragTab>
  </template>
  <script setup>
  import TyDragTab from '@/ty-ui/lib/ty-tab/tysrc/ty-drag-tab.vue';
  import anchorContent from './anchor-content';
  import { useTabEditor, createProps, createEmits, useOverride } from './composables/tab-editor.js';
  const props = defineProps(createProps());
  const emits = defineEmits(createEmits());
  const {
    $route,
    $attrs,
    tabLoading,
    dragTabRef,
    dropdownRef,
    popoverInnerComponentRef,
    anchorContentRef,
    tabContentLoading,
    activeTab,
    tabComponentRef,
    tabOpt,
    showPopover,
    handleTabchange,
    handleTabLeave,
    getContainerComponent,
    getBindOption,
    handleAdd,
    handleSelect,
    handleDropdownVisible,
    handlePopoverConfirm,
    handleDragStart,
    handleDragEnd,
    handleUpdateTabInfo,
    setComponentRef
  } = (useOverride || useTabEditor)(props, emits);
  defineExpose({
    dragTabRef,
    activeTab,
    tabOpt,
    anchorContentRef,
    tabComponentRef,
    handleTabchange
  });
  </script>
  <style lang="scss">
  .tab-dropdown-popper-class {
    padding: 12px;
    &.el-popper[x-placement^='right'] {
      margin-left: 10px !important;
    }
    &.el-popper[x-placement^='left'] {
      margin-right: 10px !important;
    }
    .el-popper__arrow {
      display: none !important;
    }
    .ty-base-popover__footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 16px;
    }
  }
  .tab-dropdown-span {
    .el-dropdown-menu__item {
      // modify by lifs 2024/11/01 选项卡组件下拉按钮样式调整
      padding: 0 12px;
      height: 32px;
      > span {
        width: 100%;
        display: inline-flex;
        em {
          margin-right: 8px;
        }
      }
    }
  }
  .el-popper.el-dropdown__popper.tab-dropdown-span {
    .el-scrollbar {
      overflow: visible;
      .el-scrollbar__wrap.el-scrollbar__wrap--hidden-default {
        overflow: visible;
      }
    }
  }
  </style>
  <style lang="scss" scoped>
  :deep(.el-tab-pane) {
    height: 100%;
  }
  .tab-icon {
    margin-right: 4px;
  }
  :deep(.el-tabs__nav-next),
  :deep(.el-tabs__nav-prev) {
    line-height: 40px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 0 20px 4px #e7e7e7;
    background: #fff;
    z-index: 3;
    border: 1px solid #d9d9d9;
    border-top: none;
    color: #909399;
    i {
      font-size: 14px;
    }
  }
  .ty-drag-tab {
    background-color: #fff;
    z-index: 10;
    position: relative;
    :deep(.ty-ui-base-tab) {
      .el-tabs {
        .el-tabs__header {
          .el-tabs__nav-scroll {
            .el-tabs__active-bar {
              display: none;
            }
          }
          // modify by lifs 2024/08/28 去掉选项卡组件首尾的分割线
          .el-tabs__nav-prev {
            border: none;
            box-shadow: unset;
          }
          .el-tabs__nav-next {
            border: none;
            box-shadow: unset;
          }
        }
        .el-tabs__content {
          height: calc(100% - 40px);
          .anchor-content {
            .component-area {
              .component--empty {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              }
              .formRenderWrapper {
                height: 100%;
                > div {
                  height: 100%;
                  .empty {
                    height: 100%;
                  }
                }
              }
              .craft-file-wraper {
                .el-loading-mask {
                  opacity: 1;
                  background-color: rgba(255, 255, 255, 1);
                }
              }
            }
          }
        }
      }
    }
    :deep(.el-loading-mask) {
      opacity: 1;
      background-color: rgba(255, 255, 255, 1);
    }
  }
  </style>
  